<template>
	<div>



		<uni-popup ref="JY" type="bottom">
			<view class="bg-white padding-sm">
				<div style="padding-bottom: 10px">

					图标说明: 耳机：可以在智慧课堂上课的听项目 眼睛：有预览图片可以查看,可以打印材料：手机：可以在智慧课堂上课的项目

				</div>
				<view>
					<uni-easyinput v-model="screen"></uni-easyinput>
				</view>

				<scroll-view scroll-y="true" class="scroll-Y" style="height: 600rpx;margin-top: 10rpx;">

					<uni-collapse accordion :mainClickNo="true" @iconClick="iconClick" @change="change">
						<uni-collapse-item :title="item.yiZuo + '/' + item.num +'  '+item.table"
							v-for="(item,index) in JY" style="display: block;"
							v-if="item.table.indexOf(screen)!=-1||screen==null||screen==''">
							<text>
								<view class="margin-left-lg" style="color: #999;">
									<view v-if="item.remarks !=null">
										教研备注:{{
									                    item.remarks
									                  }}<br />
									</view>

									<view v-if="item.map!=null">
										<view v-if="item.map.remarks1 !=null">
											项目备注1:{{
									                      item.map.remarks1
									                    }}<br />
										</view>
										<view v-if="item.map.remarks2 !=null">
											项目备注2:{{ item.map.remarks2 }}
											<br />
										</view>
									</view>

									<view v-if="item.imgs!=null&&item.imgs!=''">
										有图片文件
									</view>
									<view v-else> 无图片信息</view>
								</view>

							</text>
						</uni-collapse-item>

					</uni-collapse>

					<!-- 	<div >
						<span
							:style="{color:((item.yiZuo<item.num||item.num==0)?'#67C23A':'#a40404'),fontWeight:'bold'}">
							{{ }}
						</span>

						{{ item.table }}
					</div> -->
				</scroll-view>


			</view>

		</uni-popup>

	</div>

</template>

<script>
	import {
		getJYPlan
	} from "@/api/lpc/monthlyplan/LpcMonthlyPlanManagementApi";
	import {
		deleted,
		doInsert
	} from "@/api/system/academicAffairsCenter/LessonPreparationRecords/LessonPreparationRecords";
	import {
		isEmpty
	} from "lodash";
	import {
		getVideoUrlById
	} from "@/api/coreLessonPreparation/source";

	export default {
		name: "EditLessonPreparationRecords",
		directives: {

		},
		data() {
			return {
				screen: null,
				beikeData: {
					ids: null
				}, //备课数据
				JY: [], //教研
				dialogFormVisiblebeikeshili: false, //试听框框
				chakanshili: {
					IntelligentClassroom: {},
					table: "",
				}, //示例的数据
				drawer: false,
				direction: 'rtl',
				JYPlanLoading: false,
				layout2: "total, prev, pager, next, sizes",
				list2: [],
				gjzms: {},
				from: {},

				list2222222222222: [{
						"table": "肢体控制基础",
						"options": []
					},
					{
						"table": "基础肌力",
						"options": []
					},
					{
						"table": "听动反应",
						"options": []
					},
					{
						"table": "感统游戏",
						"options": []
					},
					{
						"table": "爬行",
						"options": []
					},
					{
						"table": "跳跃",
						"options": []
					},
					{
						"table": "前庭",
						"options": []
					},
					{
						"table": "本体",
						"options": []
					},
					{
						"table": "触觉",
						"options": []
					},
					{
						"table": "基础视觉控制",
						"options": []
					},
					{
						"table": "静态",
						"options": []
					},
					{
						"table": "听记忆",
						"options": []
					},
					{
						"table": "听注意力",
						"options": []
					},
					{
						"table": "听动统合",
						"options": []
					},
					{
						"table": "视注意力",
						"options": []
					},
					{
						"table": "视记忆",
						"options": []
					},
					{
						"table": "视动统合",
						"options": []
					}
				],
				listLoading3: false,
				index: 0,
				data: {
					customerModel: {
						student: {}
					}
				},
				index2: 0, //第几个项目
				typeData: {},
			};
		},
		methods: {
			iconClick(e) {
				console.log();

			},
			change(e) {

				if (e) {
					this.changIds(this.JY[e])

				}

			},
			async show(data, type, index, ites) {
				this.$refs.JY.open()
				Object.assign(this.$data, this.$options.data())
				//如果ites 是空的 就是第一次 不是的话 就是编辑
				if (ites != null) {
					//如果是编辑。则把ites 赋值给 beikeData
					this.from = ites
					this.beikeData.ids = ites.beikeId
				}

				this.index = index
				this.data = data
				if (this.data.lpcMonthlyPlanId == null) {
					uni.showToast({
						title: "无可用月计划。暂时无法备课",
						icon: "none"
					})
					return
				}

				this.typeData = type


				//如果有教研数据。就不去请求了
				if (this.data.JY == null || this.data.JY.length == 0) {
					await this.getJYPlan(this.data.lpcMonthlyPlanId)
				} else {
					this.JY = this.data.JY
				}

			},
			leave() {},
			//请求音频并播放
			enter(data) {
				console.log(data)
			},
			//播放语音文件
			async play(url) {
				const music = new Audio(url);
				music.loop = false;
				music.playbackRate = 1;
				await music.play();
			},
			//选择数据
			changIds(e) {
				// let id = this.from.id

				// this.from = {
				// 	id: id
				// }
				this.from.title = e.table
				this.from.type = this.typeData.code
				this.from.scheduleTimetableId = this.data.id
				this.from.beikeId = e.ids
				this.from.jyPlanId = e.id
				// 找到元素 ID 为 1 的索引
				const index = this.JY.findIndex(item => item.id === e.id);
				this.index2 = index
				// 如果找到了对应的索引，则修改其值
				if (index !== -1) {
					let asdf = this.JY[index]
					asdf.yiZuo = parseInt(asdf.yiZuo) + 1
					this.$set(this.JY, index, asdf);
				}

				// this.$emit('refreshData', this.index, index, this.typeData);

				//删除这个
				if (isEmpty(e)) {
					this.deleted()
				} else {
					this.addOrEdit()
				}


				//将标题  和ids添加进 备课数据  如果ID不为空则修改。是空的则添加。然后数据再回显
			},

			//查看这个孩子的项目示例
			jiancha(row) {
				this.chakanshili = null

				this.dialogFormVisiblebeikeshili = true
				this.chakanshili = row;
				this.chakanshili.table = row.table
				if (row == null || row.ids == null) {
					alert("数据异常")
					return
				}
				this.gjhxbkwjreturndata(JSON.parse(row.ids)[0])
			},

			//根据核心备课文件ID返回项目里的第一题目语音
			async gjhxbkwjreturndata(id) {

				const {
					data
				} = await getVideoUrlById({
					id: id
				});
				for (const datum of JSON.parse(data.videoUrl)) {
					if (datum.IntelligentClassroom != null && datum.IntelligentClassroom.length > 0) {
						this.chakanshili.IntelligentClassroom = datum.IntelligentClassroom;
						return
					} else {}
				}

			},
			//新增或者编辑备课数据
			async addOrEdit() {
				this.from.version = null
				const {
					data
				} = await doInsert(this.from)
				this.$emit('refreshData', this.index, this.index2, this.typeData, data.id);
				this.handleClose()
			},
			//新增或者编辑备课数据
			async deleted() {
				const {
					data
				} = await deleted({
					id: this.from.id
				})

				// this.$emit('refreshData', this.index, this.from.id, this.JY, -1);
				this.handleClose()
			},


			//格式化教研数据
			JYFormat(data) {
				// if (this.typeData.titleindexOf.length != 0) {
				//   this.list2222222222222 = []
				//   for (const datumElementElement of this.typeData.titleindexOf) {
				//     this.list2222222222222.push({
				//       "table": datumElementElement, "options": []
				//     })
				//   }
				// }
				//
				//
				// for (const datum of data) {
				//   for (const datumElement of this.list2222222222222) {
				//     if (datum.table.indexOf(datumElement.table) !== -1) {
				//       datumElement.options.push(datum)
				//     }
				//   }
				// }
				// this.list2222222222222 = [
				//   {
				//     table: "全部",
				//     options: data
				//   }
				// ]

				return data
			},


			//这是获取课堂记录的 方法
			async getJYPlan(id) {
				this.JYPlanLoading = true
				const {
					data
				} = await getJYPlan({
					id: id
				});
				let data2 = data
				// for (const data2Element of data2) {
				//   data2Element.ids = JSON.parse(data2Element.ids)[0]
				// }
				this.JY = this.JYFormat(data2)
				this.$emit('setJY', this.index, this.JY);

				setTimeout(() => {
					this.JYPlanLoading = false;
				}, 300);

			},

			handleClose(done) {
				this.$refs.JY.close()
			}
		}
	}
</script>
<style lang="scss" scoped>
	/deep/.uni-collapse-item__title-arrow {
		display: flex;
		box-sizing: border-box;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 50px;
		margin-right: 10px;
	}

	::v-deep .el-dialog__header {
		background-color: #409EFF !important;
	}

	::v-deep .el-dialog__headerbtn .el-dialog__close {
		color: #d0d0d0;
	}

	::v-deep .el-dialog__title {
		color: #fff !important;

	}

	::v-deep .el-dialog__wrapper {
		pointer-events: none !important;

		.el-dialog {
			pointer-events: auto !important;
			box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6) !important;
		}
	}
</style>